import React, { memo } from 'react'

import CustomContainerHeader from '@/components/custom-container-header'
import CustomRingChart from '@/components/custom-chart-ring'
import { Right2Warpper } from './style'
import { computePercentage } from '@/utils'

const Right2 = memo(() => {
  const infoData = [
    {
      label: '待整改',
      value: 9,
      icon: 'weichuli',
      id: 1
    },
    {
      label: '待复核',
      value: 9,
      icon: 'yichuli',
      id: 2
    },
    {
      label: '已完成',
      value: 9,
      icon: 'fa',
      id: 3
    },
  ]
  const total = 300

  const data = [{ value: 23, name: 'A' },
  { value: 56, name: 'B' },
  { value: 12, name: 'C' },
  { value: 9, name: 'D' }]

  const chartSeries = {
    title: {
      show: true,
      text: [`{b|${total}}`, `{a|${'总数(个)'}}`,].join('\n'),
      x: '28%',
      y: '38%',
      textStyle: {
        fontWeight: 'normal',
        color: '#fff',
        rich: {
          a: {
            fontSize: 20,
            lineHeight: 28,
          },
          b: {
            fontSize: 28
          }
        }
      }
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: 16,
      right: '0',
      top: 'middle',
      orient: 'vertical',
      icon: "circle",
      textStyle: {
        color: '#fff',
        fontSize: 15
      },
      formatter: (name,) => {
        const currentObj = data.find(item => item.name === name)
        if (currentObj) {
          return `${name}   ${currentObj.value}个    占比${computePercentage(currentObj.value, total)}%`
        }
        return name
      },
    },
    series: [
      {
        name: '待整改问题数',
        type: 'pie',
        radius: ['55%', '70%'],
        center: ["35%", "50%"],
        label: {
          show: false,
          position: 'center'
        },
        data: data
      }
    ]
  }
  return (
    <Right2Warpper>
      <CustomContainerHeader defaultSlot={'综合监管'} clickRightHandle={e => { console.log('点击了详情页') }} />
      <div className="top-container">
        {infoData?.map(item => {
          return (
            <div className='item-container' key={item.id}>
              <div className='icon-box'>
                <iconpark-icon name={item.icon} color="#67D2F6" size="24"></iconpark-icon>
              </div>
              <div className='info-content'>
                <span className='label'>{item.label}</span>
                <span className='value'>{item.value}</span>
              </div>
            </div>
          )
        })}
      </div>
      <div className="chart-container">
        <CustomRingChart height="240px" chartSeries={chartSeries} />
      </div>
    </Right2Warpper>
  )
})

export default Right2